:root {
    --sm-width: 752px;
    --md-width: 940px;
    --lg-width: 1140px;
    --xl-width: 1540px;
}

.wrapper, :local(.wrapper) {
  width: 100%;
  margin: 0 auto;
}

@media screen and (--breakpoint-min-sm) {
    .wrapper, :local(.wrapper) {
        padding-left: 2em;
        padding-right: 2em;
    }
}

@media screen and (--breakpoint-min-md) {
    .wrapper, :local(.wrapper) {
        padding-left: 3em;
        padding-right: 3em;
    }
}

/* set height full relative to the parent */
.full-height, :local(.full-height) { height: 100%; }

/* set height to that of the viewport */
.viewport-height { height: 100vh; }

/* display utilities */
.block,
:local(.block)        { display: block; }

.inline,
:local(.inline)       { display: inline; }

.inline-block,
:local(.inline-block) { display: inline-block; }

@media screen and (--breakpoint-min-sm) {
    .sm-inline-block { display: inline-block; }
}

.table { display: table; }

.full, :local(.full) { width: 100%; }
.half { width: 50%; }

/* position utilities */
.fixed, :local(.fixed) {
  position: fixed;
}

.relative, :local(.relative) { position: relative; }
.absolute, :local(.absolute) { position: absolute; }

.top, :local(.top)       { top: 0; }
.right, :local(.right)   { right: 0; }
.bottom, :local(.bottom) { bottom: 0; }
.left, :local(.left)     { left: 0; }

@media screen and (--breakpoint-min-md) {
    .wrapper.wrapper--trim,
    :local(.wrapper.wrapper--trim) {
        max-width: var(--md-width);
    }
}

@media screen and (--breakpoint-min-md) {
    .wrapper.wrapper--small,
    :local(.wrapper.wrapper--small) {
        max-width: var(--sm-width);
    }
}

/* fully fit the parent element - use as a base for app-y pages like QB or settings */
.spread, :local(.spread) {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
